<!-- 弹框头 -->
<template >
  <div class="header">
    <div class="header_left">{{ name }}</div>
    <div class="header_right">
      <SvgIcon name="amplify" width="20px" height="20px" color="#ffffff" @click="amplifyHandler" />
      <SvgIcon name="close" width="20px" height="20px" color="#ffffff" @click="closeHandler" />
    </div>
  </div>
</template>
<script setup lang='ts'>

import { ref } from 'vue'

defineProps({
  name: {
    type: String,
    default: ''
  }
})

//  放大
const amplify = ref(false)
let emit = defineEmits(["amplifyHandler"])
const amplifyHandler = () => {
  amplify.value = !amplify.value
  emit('amplifyHandler', amplify.value)
}
//  关闭
import useSettingStore from '@/store/modules/setting'
let SettingStore = useSettingStore()
const closeHandler = () => {
  SettingStore.selectionDataListShow = !SettingStore.selectionDataListShow
}

</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 40px;
  background: #001627;
  border-radius: 4px 4px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;

  .header_left {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
  }

  .header_right {
    svg {
      display: inline-block;
    }
  }
}
</style>